<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head> 
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%> 
<title>用戶管理-角色管理</title>

<style type="text/css">
		html,
body {
  height:100%;
  margin:0;
  padding:0;
  font:small/1.5 "宋体", serif; 
  overflow-y: hidden;
}



</style>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/easyui/1.5.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/easyui/1.5.3/themes/icon.css?v=20171205">

<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/easyui/1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/common/public.js?v=20180416"></script> 


</head> 
  
<body>

<!-- left and right -->

 <div class="easyui-layout" style="width:100%;height:100%;">
       
        <div data-options="region:'west',split:false,title:'角色',hideCollapsedContent:false,tools:'#role_toolbar'" title="角色" style="width:250px;">
        	 <table id="roles" class="easyui-datagrid"
                    data-options="url:'${pageContext.request.contextPath}/ma/findRoles',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true,idField:'role_id'">
      
                <thead>
                    <tr>
                        <th data-options="field:'role_name'" width="80">角色名称</th>
                        <th data-options="field:'crtime',formatter:function(v){
                        	var d = new Date(v);
                        	return dateFtt('yyyy-MM-dd hh:mm:ss',d); 
                        }" width="100">创建时间</th> 
                    </tr>
                </thead>
            </table>
        
        	 
        	<div id="role_toolbar" style="padding:2px 5px;">
        		<shiro:hasPermission name="/ma/addRole"> 
        			<a href="#"  class="icon-add"   onclick="addRole()"></a>
        			<script type="text/javascript">
        				function addRole() {
        					
        					 $.messager.prompt('角色添加', '请输入要新建的角色名称', function(r){
        			                if (r){
        			                	$.messager.progress({
        			        		        title:'请稍等',
        			        		        msg:'正在处理数据...'
        			        		    });
        			                	 $.ajax({  
        							          url: './addRole'   ,  
        							          type: 'POST',  
        							          data: {role_name:r},   
        							          success: function (ret) {  
        							        	  $('#roles').datagrid('reload');
        							        	  if(ret.error) { 
        							        		  $.messager.alert('失败',"添加失败:" + result.error,'error');
        											 
        											} else if(ret.success){ 
        												$.messager.show({
        									                title:'成功',
        									                msg:'添加角色成功.',
        									                timeout:3000,
        									                showType:'slide'
        									            });
        											}
        							        	  $.messager.progress('close');
        							          },  
        							          error: function (returndata) {  
        							             // alert('fail:' + returndata);  
        							              console.log(JSON.stringify(returndata));
        							              $.messager.progress('close');
        							          } 
        							     });   
        			                }
        			            });
        					
        				}
        			
        			</script>
        			
        		</shiro:hasPermission>
        		<shiro:hasPermission name="/ma/removeRole"> 
        			<a href="#"  class="icon-remove"   onclick="removeRole()"></a>
        			<script type="text/javascript">
        				function removeRole(){
        					var select = $('#roles').datagrid('getSelections');
        					if(select && select.length > 0) {
        						var nams = [];
        						for(var i in select){
        							nams.push(select[i].role_name);
        						}
        						$.messager.confirm('提示', '您确定要删除角色: [' + nams.join(',') + '] 吗?', function(r){
        				            if (r){
        				            	$.messager.progress({
        			        		        title:'请稍等',
        			        		        msg:'正在处理数据...'
        			        		    });
        			                	 $.ajax({  
        							          url: './removeRole'   ,  
        							          type: 'POST',  
        							          data: {role_id : select[0].role_id},   
        							          success: function (ret) {  
        							        	  $('#roles').datagrid('reload');
        							        	  if(ret.error) { 
        							        		  $.messager.alert('失败',"删除失败:" + result.error,'error');
        											 
        											} else if(ret.success){ 
        												$.messager.show({
        									                title:'成功',
        									                msg:'添加角色成功.',
        									                timeout:3000,
        									                showType:'slide'
        									            });
        											}
        							        	  $.messager.progress('close');
        							          },  
        							          error: function (returndata) {  
        							             // alert('fail:' + returndata);  
        							              console.log(JSON.stringify(returndata));
        							              $.messager.progress('close');
        							          } 
        							     });   
        				            }
        				       });
        					}
        					
        				}
        			
        			</script>
        		</shiro:hasPermission>
        		<shiro:hasPermission name="/ma/updateRole"> 
        			<a href="#"  class="icon-edit" onclick="updateRole()" ></a>
        			<script type="text/javascript">
        				function updateRole() {
        					var select = $('#roles').datagrid('getSelected');
        					if(!select ) return ;
        					$.messager.prompt('角色名称修改', '请输入要新的角色名称,原始角色名称:' + select.role_name , function(r){
    			                if (r){
    			                	$.messager.progress({
    			        		        title:'请稍等',
    			        		        msg:'正在处理数据...'
    			        		    });
    			                	 $.ajax({  
    							          url: './updateRole'   ,  
    							          type: 'POST',  
    							          data: {role_name: r ,role_id : select.role_id},   
    							          success: function (ret) {  
    							        	 
    							        	  if(ret.error) { 
    							        		  $.messager.alert('失败',"更新失败:" + ret.error,'error');
    											 
    											} else if(ret.success){ 
    												$.messager.show({
    									                title:'成功',
    									                msg:'更新角色名称成功.',
    									                timeout:3000,
    									                showType:'slide'
    									            });
    												$('#roles').datagrid('reload');
    												
    											}
    							        	  $.messager.progress('close');
    							          },  
    							          error: function (returndata) {  
    							             // alert('fail:' + returndata);  
    							              console.log(JSON.stringify(returndata));
    							              $.messager.progress('close');
    							          } 
    							     });   
    			                }
    			            });
        					
        				}
        			
        			  
        			
        			</script>
        			
        		</shiro:hasPermission>
        		 
    		</div>
        	 
        
        </div>
        <div data-options="region:'center',title:'权限',tools:'#perms_toolbar'">
        	<shiro:hasPermission name="/ma/findRoleMenus">
        		
        	<table id="role_perms" class="easyui-treegrid"
                    data-options="url:'./findRoleMenus',method:'get',checkbox: true,border:false,cascadeCheck:false,singleSelect:true,fit:true,fitColumns:true,idField:'menu_id',treeField:'menu_name'">
                <thead>
                    <tr>
                      <th data-options="field:'menu_name',align:'left'" width="130">菜单名称</th>
                        <th data-options="field:'menu_id'" width="80">菜单ID</th>
                        <th data-options="field:'parent_id'" width="100">上级ID</th>
                       
                        <th data-options="field:'menu_url',align:'left'" width="130">菜单地址</th>
                        <th data-options="field:'is_visible'" width="70">是否可见</th>
                        <th data-options="field:'menu_type',align:'left',formatter:function(v){
                        	if(v == 1){
                        		return '页面' ;
                        	} else if(v == 2){
                        		return '功能菜单';
                        	}
                        	return '' ;
                        }" width="60">菜单类型</th>
                    </tr>
                </thead>
            </table>
           <div id="perms_toolbar">
           	<shiro:hasPermission name="/ma/editRolePerms"> 
        		<a href="#"  class="icon-save"  onclick="saveRolePerms()"></a>
        		<script type="text/javascript">
        			function saveRolePerms() {
        				
        				//获取当前选择的所有节点
        				var checks = $('#role_perms').treegrid('getCheckedNodes');
        				var role = $('#roles').treegrid('getSelected');
        				if(!role || !role.role_id) {
        					 $.messager.alert('提示','请先选择对应的角色!','error');
        					 return ;
        				}
        				var ids = [];
        				for(var i in checks) {
        					ids.push(checks[i].menu_id);
        				}
        				
        				var rid = role.role_id;
        				console.log('rid:' + rid);
        				console.log(ids.join(','));
        				$.messager.progress({
	        		        title:'请稍等',
	        		        msg:'正在处理数据...'
	        		    });
	                	 $.ajax({  
					          url: './editRolePerms'   ,  
					          type: 'POST',  
					          data: {role_id: rid , perms:ids.join(',')},   
					          success: function (ret) {  
					        	  $('#roles').datagrid('reload');
					        	  if(ret.error) { 
					        		  $.messager.alert('失败',"角色权限修改失败:" + result.error,'error');
									 
									} else if(ret.success){ 
										
										//更新一下角色列表中的值
										$('#roles').datagrid('updateRow',{
											index: $('#roles').datagrid('getRowIndex' , rid) ,
											row: {
												"role_id" : rid,
												"perms" : ids.join(',')
												}
										});
										
										$.messager.show({
							                title:'成功',
							                msg:'角色权限修改成功.',
							                timeout:3000,
							                showType:'slide'
							            });
									}
					        	  $.messager.progress('close');
					          },  
					          error: function (returndata) {  
					             // alert('fail:' + returndata);  
					              console.log(JSON.stringify(returndata));
					              $.messager.progress('close');
					          } 
					     });   
        			}
        		
        		</script>
        		
        	</shiro:hasPermission>
           </div>
            
            
            <script type="text/javascript">
            	//角色选择切换后 右侧所属权限跟着变动
            	$('#roles').datagrid({
            		onClickRow:function(index,row){
            			//清空权限选择
        				var checks = $('#role_perms').treegrid('getCheckedNodes');
        				if(checks){
        					for(var i in checks){ 
        						$('#role_perms').treegrid('uncheckNode' , checks[i].menu_id);  
        					} 
        				}
            			
            			var perms = row.perms ;
            			if(perms) { 
            				var perm_ids = perms.split(',');
            				for(var i in perm_ids){
            					$('#role_perms').treegrid('checkNode' , perm_ids[i]);  
            				}
            			}
            			
            		}
            	});
            
            </script>
        		
        	</shiro:hasPermission>
           
        </div>
    </div>

 
</body>

</html>